<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogData.isShow"
    width="480px"
    :before-close="handleBeforeClose"
  >
    <div class="form-box">
      <el-form
        ref="ruleForm"
        :rules="rules"
        :model="ruleForm"
        label-width="120px"
        class="addForm"
      >
        <el-form-item label="抽奖图标" prop="iconImg">
          <!-- <input type="hidden" :imgUrl="ruleForm.iconImg"> -->
          <!-- <el-button class="btnStyle" @click="clsImg" type="text"
            >重新上传</el-button
          > -->
          <uploadSingImg
            ref="clsImg"
            class="upload-img__body"
            :imgUrl="ruleForm.iconImg"
            accept=".jpg,.jpeg,.png,.gif"
            :maxSize="2"
            @getImgUrl="getGoodImg"
            :disabled="isCheck"
          >
            <template v-slot:imgInfo
              >（注：图片建议尺寸为：88*88，图片大小不超过 2M，支持
              jpg、jpeg、png、gif 格式）</template
            >
          </uploadSingImg>
        </el-form-item>
        <el-form-item label="频道号:" prop="channelId">
          <el-input
            v-model.number="ruleForm.channelId"
            type="text"
            placeholder="请输入关联频道号"
            maxlength="10"
          ></el-input>
        </el-form-item>
        <el-form-item label="抽奖活动:" prop="activityId">
          <el-select
            v-model="ruleForm.activityId"
            placeholder="请选择一个抽奖活动"
          >
            <el-option
              v-for="item in activityList"
              :key="item.activityId"
              :label="item.activityName"
              :value="item.activityId"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表单部分 -->
    <span slot="footer" class="dialog-footer">
      <el-button type="success" plain @click="cancel">取 消</el-button>
      <el-button type="success" :loading="loading" @click="confirm('ruleForm')"
        >确认</el-button
      >
    </span>
  </el-dialog>
</template>
<script>
import { getActivityList } from '@/api/appSetting/lotteryAllocation'
import uploadSingImg from '@common/uploadSingImg' // 上传单个图片公共组件

export default {
  props: [
    'dialogData',
    'activityStatuEnums',
    'activityStatus',
    'postCommandModel'
  ],
  data() {
    let checkValue = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('频道号不能为空'))
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error('请输入数字'))
        } else {
          callback()
        }
      }, 200)
    }
    return {
      loading: false,
      isCheck: false, //是否查看
      title: '新建',
      // 表单数据
      ruleForm: {
        channelId: '',
        iconImg: '',
        activityId: '',
        ...this.postCommandModel
      },
      // maxLength: 5, //标题最大长度
      rules: {
        channelId: [
          { required: true, message: '频道号不能为空', trigger: 'blur' },
          { required: true, validator: checkValue, trigger: ['change', 'blur'] }
        ],
        iconImg: [
          { required: true, message: '抽奖图标不能为空', trigger: 'change' }
        ],
        activityId: [
          { required: true, message: '抽奖活动不能为空', trigger: 'change' }
        ]
      },
      activityList: []
    }
  },
  components: {
    uploadSingImg
  },
  mounted() {
    if (this.dialogData.type === 'edit') {
      this.title = '编辑'
      this.ruleForm.channelId = +this.postCommandModel.channelId
    }
    this.getActivityList()
  },
  methods: {
    // 获取活动
    getActivityList() {
      getActivityList(
        { activityStatuEnums: this.activityStatuEnums },
        (res) => {
          if (this.activityStatus === 'OVER') {
            let arr = {
              activityId: '1',
              activityName: '未选择状态'
            }
            this.activityList.unshift(arr)
          } else {
            this.activityList = res
          }
        },
        (err) => {
          console.log(err)
        }
      )
    },
    getGoodImg(url) {
      this.ruleForm.iconImg = url
    },
    handleBeforeClose(done) {
      this.cancel()
      done()
    },
    cancel() {
      this.dialogData.isShow = false
    },
    /* 确认提交 */
    confirm(formName) {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$emit('refresh', this.ruleForm)
          this.dialogData.isShow = false
        }
      })
    }
  },
  watch: {
    activityList: {
      immediate: true,
      handler(newV, oldV) {
        if (this.activityStatus === 'OVER') {
          this.ruleForm.activityId = '1'
        }
      },
      deep: true
    }
  }
}
</script>
<style lang="less" scoped>
.addForm {
  padding-bottom: 10px;
}
.upload-img__body {
  margin-top: 10px;
}
:deep(.btnStyle) {
  margin-left: 10px;
}
</style>
